<template>
  <div class="about-user bg-w">
    <h3 class="user b-c">关于作者</h3>
    <div class="user-detail fx-h-c">
      <img
        src="https://sf3-ttcdn-tos.pstatp.com/img/user-avatar/ef6dfe4669d52287b2de2e0a248c6e1b~300x300.image"
        class="br-5 cs"
        alt=""
      />
      <div class="right">
        <h2 class="username">阿里妈妈前端快爆</h2>
        <span class="job ofh"
          >前端小学生 @Alib解放立刻大数据弗兰克附近的拉萨开发....</span
        >
      </div>
    </div>
    <ul class="agree-read m-t-1">
      <li class="fx-h-c item">
        <div class="ico br-5">
          <a-icon type="like"></a-icon>
        </div>
        <span class="agree-msg">获得点赞 {{agree}}</span>
      </li>
      <li class="fx-h-c item">
        <div class="ico br-5">
          <a-icon type="eye" />
        </div>
        <span class="agree-msg">文章被阅读 {{view}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { getUserArticle, get_one } from "@/api/article";
import { normlizeUserMsg } from "@/utils/utils";
export default {
  name: "AboutUser",
  data() {
      return {
          view: 0,
          agree: 0
      }
  },
  async created() {
    const articleId = this.$route.params.id;
    const { data } = await get_one(articleId);
    const userId = data.author._id;
    const res = await getUserArticle({ userId });
    const { view, agree } = normlizeUserMsg(res.data);
    this.view = view;
    this.agree = agree;
  },
};
</script>

<style lang="scss" scoped>
.about-user {
  height: 22rem;
  // padding: 1.5rem;
  .user {
    padding: 1rem;
    font-size: 1.5rem;
  }
  .user-detail {
    padding: 1rem;
    img {
      width: 5rem;
      height: 5rem;
      margin-right: 1rem;
    }
    .right {
      .username {
        font-size: 1.6rem;
        font-weight: bold;
      }
      .job {
        width: 16rem;
        display: inline-block;
        color: #72777b;
      }
    }
  }
  .agree-read {
    padding: 1rem;
    .item {
      margin-bottom: 1rem;
      font-weight: bold;
      .ico {
        padding: 0.5rem;
        margin-right: 1.5rem;
        color: #7bb9ff;
        background: #e1efff;
      }
    }
  }
}
</style>